import { useState } from "react"

export default function Counter(props) {
    const [count, setCount] = useState(props.defaultValue || 0)

    console.log('组件渲染', props)
    const increase = () => {
        // setCount(count + 1);
        // setCount(count + 1);
        // // count值是异步更新，所以调用两次setCount(count + 1)方法值也只是加1，所以日志输出的是没加1的值
        // console.log(count)
        // 执行父组件事件
        // props.onClick()
        setCount(prev => prev + 1);
        setCount(prev => prev + 1);
        // 可实现+2的效果，用的箭头函数，第二次取的加1后的值
        console.log(count)

    }
    const decrease = () => {
        setCount(prev => prev - 1);
    }

    return (
        <div>
            <button onClick={increase}>+1</button>
            <span>{count}</span>
            <button onClick={decrease}>-1</button>
        </div>
    )
}